/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Rosario:400,400italic,700,700italic);

*{ margin:0;  padding:0;}
body { background:#FFF;margin:0 auto 0 auto;}
div {width:960px;margin:0 auto 0 auto; height:0px auto; float:none;}
header {width: 960px; height: 120px; margin: 60px 0 0 10px; margin:0 auto 0 auto}
header nav {width:960px; height: 120px;margin:0 auto 0 auto;}
header nav ul { width:960px; height: 120px; display:inline;margin:0 auto 0 auto;}
header nav ul li {float:left; list-style-type: none;margin:0 auto 0 auto;}
header nav ul li a { text-decoration:none; color:#000; margin:0 auto 0 auto;}


section {width:960px; height: 250px; margin:120px 10px;}
section article {width:685px; height: 300px; float:left;}
section article h1 { margin: 35px auto 50px 50px;}
section article p {margin:50px  auto;}
section aside {background:#360; width: 275px; height:250px; float: right;}



/* clases */

/*header*/

li.contenedor {width:137px; height:120px; float:left;}
li#uno {background:#98CB32}
li#dos {background:#D51C3E}
li#tres {background:#EC7901}
li#cuatro {background:#73ADAB}
li#cinco {background:#F4AF67}
li#seis {background:#E6778B}
li#siete {background:#D6EA99;}

img.icono {display:block; margin:10px auto; width:70px}

p.menu {font-size:14px; text-align:center; font-family: 'Titillium Web', sans-serif;}

li.contenedor:hover {height:140px}
li.contenedor:hover p.menu { padding-top: 20px;}


								
							
	


/*section*/

 /*article*/
 
#fondoarticle { 
                width: 960px;
				height:250px;
				position: absolute;
				margin: 35px 0;
				background-image:url(img/imgarticle.jpg); 
	} 

#yolacurse { width: 424px;
             height: 250px;
			 position:relative;
			 float:left;
			 }
			 
#yolacurse h1{ width: 300px;
               height: 250px;
			   position:relative;
			   float:left;
			   
			 }			
			  
#yolacurse h1 p{ width: 250px;
                 height: 250px;
			     position:relative;
			     float:none;
				 margin:-165px 0 0 0; 
			 }
			 
#yocursecartel { width: 360px;
	             height: 360px;
	             margin: auto;
	             position: absolute;
				 margin:-71px 310px;
				 background:url(img/yolacurse.png);
				 float:right;
}





/*pastillas 3 secciones*/


div.sliderinfo {width:200px;
                height:250px;
				float:left;
				margin:0 14px 0 10px; 
				padding: 5%;
				background: #EDEDEB;
				}
				
div.sliderinfo img {width:296px;
                   height::250px;
				   float:left;
				   margin:10px -48px;
				  }				
	
h1#titulosxtres {width:256px;
                height::100px;
				float:left;
				text-align:center;
				margin:-48px; 
				background: #98CB32;
				color: #333;
				font-size:21px;
				position:relative;
				padding:10%;
				font-family: 'Rosario', sans-serif;
				}
	
	
#divcontenedor { width:960px;
                 height:250px;
				 position: absolute;
				 margin:286px 0;
				 
				 }
				 
div.sliderinfo p{width:200px;
                height::250px;
				float:left;
				margin:0px 10px 0 10px; 
				color: #666;
				font-family: 'Rosario', sans-serif;
				font-size:12px;
				}				 
				 
				 
.sliderinfo a { color: #98CB32;
				font-family: 'Rosario', sans-serif;
				font-size:16px;
				float:right;
				}				 
							 
			 
				 

	
	 
	

	
				 
  /*aside*/
  
 .titulos {color: #D51C3E; font-size:60px;font-family: 'Rosario', sans-serif;  text-transform: uppercase;}
 .bajada {color:#333; font-size:12px; font-family: 'Rosario', sans-serif; width: 200px; height:100px; float:left; margin:auto; text-transform: none}
 .subtitulados {color:#666; font-size:23px;font-family: 'Rosario', sans-serif;}
 
#recomenda { width:275px;
			 height:250px;
			 position: absolute;
			 margin: 0 650px;
			 	
			}
	
#recomenda h1 { width:240px;
			 height:250px;
			 position: absolute;
			 margin:70px 50px;
			 	
			}	
			
#recomenda p { width:240px;
			 height:250px;
			 position: absolute;
			 margin:40px 50px ;
			 	
			}	
			
			
	/*dicen por ahi*/
	
#dicencontenedor { width: 684px;
                   height:350px;
				   margin:20px 8px;
				   float: left;
	              }	
	
#foro { width: 27px;
        height:350px;
		margin:20px 1px;
		float: left;
	              }				
/*botones*/

#yolacurse img {top:-105px;
              position:relative;
			  float:left;
			  display:block;
			  right:-50px;
			  }
			  
#recomenda img	{top:170px;
              position:relative;
			  float:left;
			  display:block;
			  right:-50px;
			  }		  


/*footer*/

#piecontenedor { width: 960px;
      
	   background:#D51C3E;
	   height:230px;
	   position:relative;
	   top:655px;
	   }
	  
	  
	  
div.pie {width:260px;
         float:left;
		 margin:0 auto 0 auto; 
		 padding:3%;
		 }	  
	  
h1.titulospie { width:200px;
              color:#CCC;
			  font-size:18px;
			  font-family: 'Rosario', sans-serif;
			  position:relative;
			  top:-20px;
			  right:-60px
			  }


.pie p { width:220px;
              color:#fff;
			  font-size:12px;
			  font-family: 'Rosario', sans-serif;
			  position:relative;
			  top:-20px;
			  right:-60px;
			  }  
			   
			   
.pie img {float:right;
	      position:relative;
		  top:-20px;
		  right:73px;
		  padding:1%;
		  }			   
			  
			  
div.pie nav  {      list-style:none;
                    font-size:12px;
			        font-family: 'Rosario', sans-serif;
			        float: none;
					position:relative;
					
                    }				  
			  
div.pie nav ul li { list-style:none;
                    font-size:12px;
			        font-family: 'Rosario', sans-serif;
			        margin: 5px 10px;
					float: none;
					position:relative;
					top:-20px;
			        right:-50px;
					}
					
div.pie nav ul li a{color:#fff;
					text-decoration: none;
                    }						 
						 

footer{ width:960px ;
        height:50px;
		float: none;
        }


footer p {width:960px;
          height:50px;
          color: #666;
		  font-size:12px;
		  text-align:center;
		  font-family: 'Titillium Web', sans-serif;
		  position:absolute;
		  top:1500px;
		  }						 
								  
			  
			  
	/* Solo para celulares */
	
	
@media screen and (max-width: 320px) {

#piecontenedor {width:320px;float:left;position:relative;}
#foro img {display:none;}
#recomenda {display:none;}
footer p{ width:100%; font-size:9px;}
#dicencontenedor img{width:320px;position:relative; padding:2%;}
div.sliderinfo {width:320px;position:relative;display:block;}
#yocursecartel{display:none;}
#fondoarticle {width:100%;}
header nav ul{display:list-item}

}